<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>The Ajax 01 Page</h1>
    <fieldset>
        <legend>Ajax 异步请求</legend>
        <button onclick="doAjaxGet()">Ajax Get Request</button>
        <span id="resultId">Loading data...</span>
    </fieldset>
</div>
<script>
        function doAjaxGet() {//这个方法运行于浏览器进程内部的主线程（main）中
            debugger;
            //1.创建XHR对象(此对象是ajax技术应用的入口对象，发送异步请求，处理响应结果)
            var xhr=new XMLHttpRequest();
        //2.设置状态监听

            xhr.onreadystatechange=function () {//事件监听函数（处理客户端与服务端通过过程产生的数据）

                //readyState的值0，1，2，3，4
                //0表示还未执行open方法
                //1表示已执行open方法但还未执行send方法
                //2表示已执行send方法
                //3表示客户端正在接收服务端响应的数据
                //4表示客户端已经完成响应数据的接收
        if(xhr.readyState==4&&xhr.status==200){//status==200 表示服务端的处理过程是OK的
            var result=xhr.responseText;//获取服务端响应的文本数据
            document.getElementById("resultId").innerHTML=result;
        }
            }
        //    3.建立与服务端的连接
            xhr.open("Get","http://localhost:8080/doAjaxGet",true);//true 表示异步请求  false 表示同步请求
        //    4.发送请求
            xhr.send(null);  //将请求交给ajax引擎
            console.log("do other ...")//run main thread

        }

</script>
</body>
</html>